.case {
    width: 300px;
    height: 500px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--speaker-bg);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), inset 0 1px 1.5px rgba(255, 255, 255, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.2), inset 0 -1px 1.5px rgba(0, 0, 0, 0.4), inset 0 -2.5px 4px rgba(0, 0, 0, 0.2), inset 2px 0 4px rgba(0, 0, 0, 0.25), inset -2px 0 4px rgba(0, 0, 0, 0.25), inset 0 0 6px rgba(120, 255, 190, .55), inset 0 0 14px rgba(0, 255, 120, .35), 0 0 10px rgba(0, 255, 120, .45);
}

.case.boom {
    animation: boomCase 500ms infinite;
}

.case.boom .rd:before {
    animation: boom2 500ms infinite;
}

.case.boom .rd:after {
    animation: boom1 500ms infinite;
}

.case.boom .brand {
    animation: boomBrand 500ms infinite;
}

.case .brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 22px;
    color: #dadada;
    text-align: center;
    width: 300px;
    left: 0;
    z-index: 22;
    font-family: 'Yellowtail', cursive;
    color: #dadada;
    font-size: 25px;
    text-shadow: 1px 1px 1px #000;
    transform: scale(1);
}

.rd {
    margin: 0 auto;
    background: #39ff9b;
    box-shadow: inset 0px 0px 3px 3px rgba(0, 0, 0, .4);
    position: relative;
}

.rd#sm {
    width: 120px;
    height: 120px;
    border-radius: 5px;
    border-radius: 100%;
    margin-top: 65px;
    border: 10px solid #1a1a1a;
}

.rd#big {
    margin-top: 30px;
    width: 200px;
    height: 200px;
    border-radius: 5px;
    border-radius: 100%;
    border: 15px solid #1a1a1a;
}

.rd:before {
    content: '';
    width: 80%;
    height: 80%;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    display: block;
    background: #3e4243;
    background-image: linear-gradient(to top left, #3e4243 10%, #252a2b);
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .6);
    z-index: 1;
}

.rd:after {
    content: '';
    width: 35%;
    height: 35%;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    display: block;
    background: #0f1010;
    background-image: radial-gradient(#303435 5%, #000);
    z-index: 3;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, .5);
}

@keyframes boom1 {
    0%,
    100% {
        width: 35%;
        height: 35%;
        border-radius: 5px;
        border-radius: 100%;
    }
    20% {
        width: 40%;
        height: 40%;
        border-radius: 5px;
        border-radius: 100%;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .3);
    }
}

@keyframes boom2 {
    0%,
    100% {
        width: 80%;
        height: 80%;
        border-radius: 5px;
        border-radius: 100%;
    }
    20% {
        width: 82%;
        height: 82%;
        border-radius: 5px;
        border-radius: 100%;
        box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .7);
    }
}

@keyframes boomCase {
    0%,
    100% {
        box-shadow: 0px 8px 10px 3px rgba(0, 0, 0, .2);
    }
    20% {
        box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, .7);
    }
}